<template>
	<view class="page">
		<!-- <c-nav-bar :title="titleHeader" ></c-nav-bar> -->
		<view class="box">
			<view class="title">投诉类型</view>
			<view class="types">
				<view v-for="(item, index) in suggests" :key="index" :class="current == index ? 'active' : ''"
					@tap="choiceType(index, item.value)">
					{{ item.name }}
				</view>
			</view>
		</view>
		<view class="hr"></view>
		<view class="box">
			<view class="title">投诉对象</view>
			<input type="text" placeholder="请输入" v-model="formData.complainantObject">
		</view>
		<view class="hr"></view>
		<view class="box">
			<view class="title">详细意见</view>
			<u--textarea v-model="formData.content" height="200rpx" :disableDefaultPadding="true" border="none"
				placeholder="请详细描述您的意见或建议，以便我们提供更好的帮助与处理。"></u--textarea>
		</view>
		<view class="hr"></view>
		<view class="box">
			<view class="title">上传图片</view>
			<view class="upload">
				<!-- <u-upload :maxCount="9" auto-upload="true" :previewFullImage="true" :fileList="fileList"
					@afterRead="afterRead" @delete="deletePic" multiple width="74" height="74">
					<image src="@/static/my/complaintFeedback/upload.png" mode="widthFix"
						style="width: 148rpx;height: 148rpx;" v-if="!this.fileList1.length"></image>
					</u-upload> -->
				<u-upload :fileList="fileList" multiple :maxCount="9" :maxSize="10 * 1024 * 1024" @afterRead="afterRead"
					@delete="deletePic" @oversize="overSize" :width='210' :height="210">
					<image class="upload-image" src="https://i.ringzle.com/file/20231114/53102e3179d84a17ab47d8df72923ef7.png"
						mode="">
					</image>
				</u-upload>
			</view>
		</view>
		<view class="hr2"></view>
		<view class="lxfs">
			<view style="width: 30%;" class="title">联系方式</view>
			<view style="width: 100%;">
				<input placeholder="请输入" v-model='formData.complainantPhone' clearable style="text-align: right;" />
			</view>
		</view>
		<view class="hr"></view>
		<view class="submit" @click="submit">
			<view :class="canSubmit ? 'btn active' : 'btn'">提交</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'complaintFeedbackOnline',
	data() {
		return {
			// titleHeader:'在线投诉',
			imgArr: [],
			picList: [],
			suggests: [{
				name: '功能故障',
				value: 0
			}, {
				name: '景区意见',
				value: 1
			}, {
				name: '产品建议',
				value: 2
			}, {
				name: '预订咨询',
				value: 3
			}, {
				name: '订单咨询',
				value: 4
			}, {
				name: '其他',
				value: 5
			}],
			cObject: '',
			cSuggest: '',
			uploadList: [],
			contact: '18766663256',
			canSubmit: false,
			current: '0',
			formData: {
				complainantType: 0,
				complainantObject: '',
				content: '',
				complainantPhone: '',
				pic: '',
				type: 1
			},
			fileList: []
		}
	},
	watch: {
		'formData.complainantPhone': {
			handler(newV) {
				this.canSubmit = true
				// var reg = /^(\d{3})\d{4}(\d{4})$/;
				// this.formData.complainantPhone=newV.replace(reg, "$1****$2");
			}
		}
	},
	methods: {

		// 删除图片
		deletePic(event) {
			this.fileList.splice(event.index, 1)
		},
		// 新增图片
		async afterRead(event) {
			let Lists = [].concat(event.file)
			let fileListLen = this.fileList.length
			Lists.map((item) => {
				this.picList.push(
					item.url,
				)
			})
			for (let i = 0; i < Lists.length; i++) {
				const result = await this.uploadFilePromise(Lists[i].url)
				this.imgArr.push(result)
			}
			this.formData.pic = this.imgArr.toLocaleString()
		},

		//上传图片
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				this.$api.detectionContent(url,2).then(result=>{
					if(result.code===0){
						let a = uni.uploadFile({
							url: 'https://i.ringzle.com/island-cloud-server/oss/file/aliyunUpload',
							filePath: url,
							name: 'file',
							header: {
								token: wx.getStorageSync('access_token')
							},
							success: (res) => {
								let data = JSON.parse(res.data) //最终传给的是字符串，这里需要转换格式
								this.fileList.push({
									url: data.data.url
								})
								resolve(data.data.url)
							}
						});
					}else this.$showToast(result.msg)
				})
			})
		},
		choiceType(index, item) {
			this.current = index
			this.formData.complainantType = item
		},
		submit() {
			if (!this.formData.complainantObject) {
				uni.showToast({
					icon: 'none',
					title: '请填写投诉对象',
					duration: 2000
				})
				return
			} else if (!this.formData.content) {
				uni.showToast({
					icon: 'none',
					title: '请填写详细意见',
					duration: 2000
				})
				return
			} else if (!this.$reg.mobile(this.formData.complainantPhone)) {
				uni.showToast({
					icon: 'none',
					title: '请填写正确的联系人手机号',
					duration: 2000
				})
				return
			}
			
			this.$api.detectionContent(this.formData.content).then(result=>{
				if(result.code!==0) return this.$showToast(result.msg);
				
				let newData = JSON.parse(JSON.stringify(this.formData));
				newData.complainantPhone = this.$aesTm.encrypt(newData.complainantPhone);
				this.$api.post('/api/complaint', newData).then(res => {
					if (res.data.msg == 'success') {
						uni.showToast({
							title: '提交成功',
							icon: 'none',
							success: function (res) {
								uni.reLaunch({
									url: '/pagesMy/complaintFeedback/dataList'
								})
							},
							duration: 2000
						})
					} else {
						uni.showToast({
							title: '提交失败，请重试',
							icon: 'warning'
						})
					}
				})
			})
		}
	}
}
</script>

<style scoped lang="less">
.page {

	// padding-top: 150rpx;
	.box {
		padding: 36rpx 30rpx;

		input {
			font-size: 30rpx !important;
		}

		.title {
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 600;
			color: #111111;
			line-height: 32rpx;
			margin-bottom: 20rpx;
		}

		.types {
			width: 100%;
			margin-top: 16rpx;
			overflow: hidden;
			display: grid;
			grid-template-columns: 32.33% 32.33% 32.33%;
			gap: .5%;

			view {
				height: 60rpx;
				float: left;
				background: #F7F7F7;
				border-radius: 12rpx;
				margin-top: 20rpx;
				line-height: 60rpx;
				text-align: center;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #777777;
				margin-left: 21rpx;

				&:nth-child(3n+1) {
					margin-left: 0;
				}

				&.active {
					// background: #E4F4FF;
					background: #F0F8F6;
					color: #007A69;
				}
			}
		}

		input {
			border: none;
			outline: none;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #111111;
			margin-top: 40rpx;

			&::placeholder {
				color: #AAAAAA;
			}
		}

		.upload {

			.upload-image {
				width: 210rpx !important;
				height: 210rpx !important;
				margin: 8rpx !important;
			}


		}
	}

	.lxfs {
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.title {
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 600;
			color: #111111;
			line-height: 32rpx;
			// margin-bottom: 20rpx;
		}

		input {
			font-size: 30rpx !important;
		}

		text {
			&:first-child {
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #777777;
				line-height: 42rpx;
			}

			&:last-child {
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 42rpx;
			}
		}
	}

	.submit {
		padding: 56rpx 24rpx 92rpx;

		.btn {
			width: 702rpx;
			height: 88rpx;
			background: #EFEFEF;
			border-radius: 44rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: bold;
			color: #AAAAAA;
			letter-spacing: 2rpx;
		}

		.active {
			background: #007A69;
			color: #ffffff;
		}
	}

	.hr {
		width: 100%;
		height: 1rpx;
		background: #EFEFEF;
		border-radius: 1rpx;
	}

	.hr2 {
		width: 100%;
		height: 20rpx;
		background: #F5F8FA;
		border-radius: 1rpx;
	}
}

.u-upload__button {
	width: 210rpx !important;
	height: 210rpx !important;
}

.u-upload__wrap__preview__image {
	width: 210rpx !important;
	height: 210rpx !important;
}

.u-upload__wrap__preview {
	margin: 8rpx !important;
}

.u-textarea {
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;

}

.u-textarea__field {
	height: 20vh !important;
	border-bottom: 0.5rpx solid #EFEFEF !important;
	padding-bottom: 30rpx !important;
	font-size: 28rpx !important;
	color: #AAAAAA !important;
}

// .u-upload__wrap {
// 	justify-content: center;
// }
/deep/.u-icon__icon {
	font-size: 24rpx !important;
	line-height: 24rpx !important;
}
</style>
<style>
.box .u-textarea {
	padding: 0 !important;
	margin-top: 40rpx !important;
}
</style>